<script lang="ts" setup>
import { reactive, computed } from 'vue'
import { getVideoGroupList, getVideoByTagId } from '@/api/mv'
import type { Datum, Data2 } from '@/types/video/index'
import { Right } from '@icon-park/vue-next'
import CoverMark from '@/components/cover-mark/coverMark.vue'

const state = reactive({
  tagList: [] as Datum[],
  currentId: 0,
  videoList: [] as Data2[],
})

const topEight = computed(() => state.tagList.slice(0, 8))

const getMvTag = async () => {
  const { data } = await getVideoGroupList()
  if (data.code !== 200) return ElMessage.error(data?.message ?? '获取失败')
  state.tagList = data.data
}

getMvTag()

const changeTag = (id: number) => {
  state.currentId = id
  getVideoByTag()
}

const getVideoByTag = async () => {
  const { data } = await getVideoByTagId(state.currentId)
  if (data.code !== 200) return ElMessage.error('获取失败')
  state.videoList = data.datas
}
getVideoByTag()
</script>

<template>
  <div class="text-xs">
    <div class="flex items-center justify-between">
      <el-popover placement="bottom-start" width="60%" trigger="hover">
        <template #reference>
          <el-button round>
            <span>全部视频</span>
            <Right />
          </el-button>
        </template>
        <div>
          <div class="icon-hover text-xl" @click="changeTag(0)">全部视频</div>
          <div class="h-96 py-5">
            <el-scrollbar>
              <div class="grid grid-cols-5">
                <div class="p-1 icon-hover" v-for="tag in state.tagList" @click="changeTag(tag.id)">{{ tag.name }}</div>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </el-popover>
      <div class="flex gap-4">
        <div class="icon-hover" v-for="tag in topEight" :key="tag.id" @click="changeTag(tag.id)">{{ tag.name }}</div>
      </div>
    </div>

    <div class="grid grid-cols-3 xl:grid-cols-4 gap-5 pt-5">
      <div v-for="{ data } in state.videoList" :key="data.vid">
        <CoverMark :pic-url="data.coverUrl" video :show-count="false" />
        <div class="pt-3">{{ data.title }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped></style>
